<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=robots content="noodp"><meta http-equiv=x-ua-compatible content="IE=edge, chrome=1"><title>前端问题汇总 - Yulin Lewis' Blog</title><meta name=keywords content="雨临Lewis,Java,hugo,hexo,博客"><meta name=Description content="不想当写手的码农不是好咸鱼_(xз」∠)_"><meta property="og:title" content="前端问题汇总"><meta property="og:description" content="如何让input文本框和图片对齐
在默认情况下，input文本框和图片无法自然对齐，总会有所偏差，文本框往往会比图片要往下边一点，只要给元素添加vertical-align:bottom即可令两者底部水平对齐，代码如下：


1
2


<input type=&#34;text&#34; style=&#34;vertical-align:bottom&#34;>
<img src = &#34;images/露琪亚.jpg&#34; width = &#34;50%&#34; height = &#34;50%&#34; alt = &#34;露琪亚&#34; title = &#34;死神里的露琪亚&#34;  style=&#34;vertical-align:bottom&#34;>"><meta property="og:type" content="article"><meta property="og:url" content="https://lewky.cn/posts/4d6b513d.html/"><meta property="og:image" content="https://lewky.cn/logo.png"><meta property="article:published_time" content="2018-09-02T22:49:52+08:00"><meta property="article:modified_time" content="2021-01-26T22:49:52+08:00"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://lewky.cn/logo.png"><meta name=twitter:title content="前端问题汇总"><meta name=twitter:description content="如何让input文本框和图片对齐
在默认情况下，input文本框和图片无法自然对齐，总会有所偏差，文本框往往会比图片要往下边一点，只要给元素添加vertical-align:bottom即可令两者底部水平对齐，代码如下：


1
2


<input type=&#34;text&#34; style=&#34;vertical-align:bottom&#34;>
<img src = &#34;images/露琪亚.jpg&#34; width = &#34;50%&#34; height = &#34;50%&#34; alt = &#34;露琪亚&#34; title = &#34;死神里的露琪亚&#34;  style=&#34;vertical-align:bottom&#34;>"><meta name=application-name content="雨临Lewis的博客"><meta name=apple-mobile-web-app-title content="雨临Lewis的博客"><meta name=theme-color content="#ffffff"><meta name=msapplication-TileColor content="#da532c"><link rel="shortcut icon" type=image/x-icon href=/favicon.ico><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link rel=manifest href=/site.webmanifest><link rel=canonical href=https://lewky.cn/posts/4d6b513d.html/><link rel=prev href=https://lewky.cn/posts/a39d8a42.html/><link rel=next href=https://lewky.cn/posts/df5055d.html/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css><link rel=stylesheet href=/css/style.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css><script type=application/ld+json>{"@context":"http://schema.org","@type":"BlogPosting","headline":"前端问题汇总","inLanguage":"","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/lewky.cn\/posts\/4d6b513d.html\/"},"genre":"posts","keywords":"CSS, 工作记录","wordcount":1889,"url":"https:\/\/lewky.cn\/posts\/4d6b513d.html\/","datePublished":"2018-09-02T22:49:52+08:00","dateModified":"2021-01-26T22:49:52+08:00","license":"This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher":{"@type":"Organization","name":"雨临Lewis","logo":"https:\/\/lewky.cn\/images\/avatar.jpg"},"author":{"@type":"Person","name":"雨临Lewis"},"description":""}</script></head><body header-desktop=fixed header-mobile=auto><script type=text/javascript>(window.localStorage&&localStorage.getItem('theme')?localStorage.getItem('theme')==='dark':('auto'==='auto'?window.matchMedia('(prefers-color-scheme: dark)').matches:'auto'==='dark'))&&document.body.setAttribute('theme','dark');</script><div id=mask></div><div class=wrapper><header class=desktop id=header-desktop><div class=header-wrapper><a href=https://github.com/lewky class=github-corner target=_blank title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="3.5rem" height="3.5rem" viewBox="0 0 250 250" style="fill:#70b7fd;color:#fff;position:absolute;top:0;border:0;left:0;transform:scale(-1,1)" aria-hidden="true"><path d="M0 0 115 115h15l12 27L250 250V0z"/><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentcolor" style="transform-origin:130px 106px" class="octo-arm"/><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8z" fill="currentcolor" class="octo-body"/></svg></a><div class=header-title><a href=/ title="Yulin Lewis' Blog"><span class=header-title-pre><i class="fas fa-fw fa-atom"></i></span>雨临Lewis</a></div><div class=menu><div class=menu-inner><div class=dropdown><a href=/posts/ class="menu-item menu-more dropbtn" title=点击查看所有文章><i class="fas fa-fw fa-archive"></i>归档</a><div class="menu-more-content dropdown-content"><a href=/categories/><i class="fas fa-fw fa-th"></i>分类 </a><a href=/tags/><i class="fas fa-fw fa-tag"></i>标签 </a><a href=/hot/ title=文章热度Top15><i class="fas fa-fw fa-fire"></i>热度 </a><a href=/donation/ title=感谢打赏，老板大气~><i class="fas fa-fw fa-donate"></i>打赏 </a><a href=/about/><i class="fas fa-fw fa-at"></i>关于</a></div></div><a class=menu-item href=/friends/ title=欢迎申请友链><i class="fas fa-fw fa-link"></i>友链</a><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn" title=一些有意思的东东~><i class="fas fa-fw fa-fan fa-spin"></i>趣味</a><div class="menu-more-content dropdown-content"><a href=/funny/high/ title="前方高能♂ 小心外放！" target=_blank rel=noopener><i class="fas fa-fw fa-dizzy"></i>燥起来！ </a><a href=/funny/mikutap/ title=初音未来音乐游戏 target=_blank rel=noopener><i class="fas fa-fw fa-music"></i>在线打碟 </a><a href=/funny/catch-the-cat/ title=逮住那只猫!><i class="fas fa-fw fa-cat"></i>抓住猫咪</a></div></div><div class=dropdown><a href=/ class="menu-item menu-more dropbtn" title=回到首页><i class="fas fa-fw fa-atom"></i>站点</a><div class="menu-more-content dropdown-content"><a href=/bbs/ title=来留言吧~><i class="fas fa-fw fa-comment"></i>公告留言 </a><a href=https://seo.chinaz.com target=_blank rel=noopener><i class="fas fa-fw fa-chart-line"></i>SEO查询 </a><a href=https://www.ping.cn/http/lewky.cn target=_blank rel=noopener><i class="fas fa-fw fa-bezier-curve"></i>网站测速 </a><a href=/posts/e62c38c4.html/><i class="fas fa-fw fa-cog fa-spin"></i>建站日志</a></div></div><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn"><i class="fas fa-fw fa-book"></i>文档</a><div class="menu-more-content dropdown-content"><a href=https://gohugo.io/documentation/ target=_blank rel=noopener><i class="fas fa-fw fa-star"></i>Hugo文档 </a><a href=https://javanote.doc.lewky.cn/ title=尚在完善中~ target=_blank rel=noopener><i class="fab fa-fw fa-java"></i>Java 笔记</a></div></div><a class=menu-item href=/search/ title=渲染搜索结果需要等待几秒钟~><i class="fas fa-fw fa-search"></i>搜索
</a><span class="menu-item delimiter"></span><a href=https://travellings.link target=_blank class=menu-item rel=noopener title=开往-友链接力><i class="fas fa-fw fa-subway"></i></a><a href=https://rssblog.vercel.app/ class=menu-item target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i></a><a href=https://github.com/lewky class=menu-item target=_blank rel=noopener title=GitHub><i class="fab fa-fw fa-github"></i></a></div></div></div></header><header class=mobile id=header-mobile><div class=header-container><div class=header-wrapper><div class=header-title><a href=/ title="Yulin Lewis' Blog"><span class=header-title-pre><i class="fas fa-fw fa-atom"></i></span>雨临Lewis</a></div><div class=menu-toggle id=menu-toggle-mobile><span></span><span></span><span></span></div></div><div class=menu id=menu-mobile><div class=dropdown><a href=/posts/ class="menu-item menu-more dropbtn" title=点击查看所有文章><i class="fas fa-fw fa-archive"></i>归档</a><div class="menu-more-content dropdown-content"><a href=/categories/><i class="fas fa-fw fa-th"></i>分类 </a><a href=/tags/><i class="fas fa-fw fa-tag"></i>标签 </a><a href=/hot/ title=文章热度Top15><i class="fas fa-fw fa-fire"></i>热度 </a><a href=/donation/ title=感谢打赏，老板大气~><i class="fas fa-fw fa-donate"></i>打赏 </a><a href=/about/><i class="fas fa-fw fa-at"></i>关于</a></div></div><a class=menu-item href=/friends/ title=欢迎申请友链><i class="fas fa-fw fa-link"></i>友链</a><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn" title=一些有意思的东东~><i class="fas fa-fw fa-fan fa-spin"></i>趣味</a><div class="menu-more-content dropdown-content"><a href=/funny/high/ title="前方高能♂ 小心外放！" target=_blank rel=noopener><i class="fas fa-fw fa-dizzy"></i>燥起来！ </a><a href=/funny/mikutap/ title=初音未来音乐游戏 target=_blank rel=noopener><i class="fas fa-fw fa-music"></i>在线打碟 </a><a href=/funny/catch-the-cat/ title=逮住那只猫!><i class="fas fa-fw fa-cat"></i>抓住猫咪</a></div></div><div class=dropdown><a href=/ class="menu-item menu-more dropbtn" title=回到首页><i class="fas fa-fw fa-atom"></i>站点</a><div class="menu-more-content dropdown-content"><a href=/bbs/ title=来留言吧~><i class="fas fa-fw fa-comment"></i>公告留言 </a><a href=https://seo.chinaz.com target=_blank rel=noopener><i class="fas fa-fw fa-chart-line"></i>SEO查询 </a><a href=https://www.ping.cn/http/lewky.cn target=_blank rel=noopener><i class="fas fa-fw fa-bezier-curve"></i>网站测速 </a><a href=/posts/e62c38c4.html/><i class="fas fa-fw fa-cog fa-spin"></i>建站日志</a></div></div><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn"><i class="fas fa-fw fa-book"></i>文档</a><div class="menu-more-content dropdown-content"><a href=https://gohugo.io/documentation/ target=_blank rel=noopener><i class="fas fa-fw fa-star"></i>Hugo文档 </a><a href=https://javanote.doc.lewky.cn/ title=尚在完善中~ target=_blank rel=noopener><i class="fab fa-fw fa-java"></i>Java 笔记</a></div></div><a class=menu-item href=/search/ title=渲染搜索结果需要等待几秒钟~><i class="fas fa-fw fa-search"></i>搜索</a>
<a href=https://travellings.link target=_blank class=menu-item rel=noopener title=开往-友链接力><i class="fas fa-fw fa-subway"></i></a><a href=https://rssblog.vercel.app/ class=menu-item target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i></a><a href=https://github.com/lewky class=menu-item target=_blank rel=noopener title=GitHub><i class="fab fa-fw fa-github"></i></a></div></div></header><div class="search-dropdown desktop"><div id=search-dropdown-desktop></div></div><div class="search-dropdown mobile"><div id=search-dropdown-mobile></div></div><main class=main><div class=container><div class=toc id=toc-auto><h2 class=toc-title>目录</h2><div class=toc-content id=toc-content-auto></div></div><article class="page single"><h1 class="single-title animated flipInX">前端问题汇总</h1><div class=post-meta><div class=post-meta-line><span class=post-author><a href=/ title=Author rel=author class=author><i class="fas fa-user-circle fa-fw"></i>雨临Lewis</a></span>&nbsp;<span class=post-category>收录于 <a href=/categories/%E5%89%8D%E7%AB%AF/><i class="far fa-folder fa-fw"></i>前端</a></span></div><div class=post-meta-line><i class="far fa-calendar fa-fw"></i>&nbsp;<time datetime=2018-09-02>2018-09-02</time>&nbsp;<i class="far fa-calendar-plus fa-fw"></i>&nbsp;<time datetime=2021-01-26>2021-01-26</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 1889 字
<i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 4 分钟&nbsp;<span id=/posts/4d6b513d.html/ class=leancloud_visitors data-flag-title=前端问题汇总>
<i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;次阅读
</span>&nbsp;
<a href=#comments id=post-meta-vcount title=查看评论><i class="fas fa-comment fa-fw"></i>&nbsp;<span id=/posts/4d6b513d.html/ class=waline-comment-count></span>&nbsp;条评论</a></div></div><div class="details toc" id=toc-static kept><div class="details-summary toc-title"><span>目录</span>
<span><i class="details-icon fas fa-angle-right"></i></span></div><div class="details-content toc-content" id=toc-content-static><nav id=TableOfContents><ol><li><a href=#如何让input文本框和图片对齐>如何让input文本框和图片对齐</a></li><li><a href=#如何设置透明度属性>如何设置透明度属性</a></li><li><a href=#如何通过选中文字来勾选取消复选框>如何通过选中文字来勾选/取消复选框</a><ol><li><a href=#方式一在复选框的外边包上label标签>方式一：在复选框的外边包上label标签</a></li><li><a href=#方式二通过label标签的for属性来联动某一个复选框>方式二：通过label标签的for属性来联动某一个复选框</a></li></ol></li><li><a href=#如何屏蔽双击选中文本>如何屏蔽双击选中文本</a></li><li><a href=#文本自动换行问题>文本自动换行问题</a><ol><li><a href=#word-wrap>word-wrap</a></li><li><a href=#word-break>word-break</a></li></ol></li><li><a href=#文本溢出控制>文本溢出控制</a><ol><li><a href=#单行溢出>单行溢出</a></li><li><a href=#多行溢出>多行溢出</a></li></ol></li><li><a href=#js文件中的中文在网页上显示为乱码>JS文件中的中文在网页上显示为乱码</a></li><li><a href=#参考链接>参考链接</a></li></ol></nav></div></div><div class=content id=content><h2 id=如何让input文本框和图片对齐>如何让input文本框和图片对齐</h2><p>在默认情况下，input文本框和图片无法自然对齐，总会有所偏差，文本框往往会比图片要往下边一点，只要给元素添加<code>vertical-align:bottom</code>即可令两者底部水平对齐，代码如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html><span class=p>&lt;</span><span class=nt>input</span> <span class=na>type</span><span class=o>=</span><span class=s>&#34;text&#34;</span> <span class=na>style</span><span class=o>=</span><span class=s>&#34;vertical-align:bottom&#34;</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>img</span> <span class=na>src </span><span class=o>=</span> <span class=s>&#34;images/露琪亚.jpg&#34;</span> <span class=na>width </span><span class=o>=</span> <span class=s>&#34;50%&#34;</span> <span class=na>height </span><span class=o>=</span> <span class=s>&#34;50%&#34;</span> <span class=na>alt </span><span class=o>=</span> <span class=s>&#34;露琪亚&#34;</span> <span class=na>title </span><span class=o>=</span> <span class=s>&#34;死神里的露琪亚&#34;</span>  <span class=na>style</span><span class=o>=</span><span class=s>&#34;vertical-align:bottom&#34;</span><span class=p>&gt;</span>
</code></pre></td></tr></table></div></div><p>另外还可通过vertical-align的其他属性进行垂直布局。</p><h2 id=如何设置透明度属性>如何设置透明度属性</h2><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span><span class=lnt>8
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=o>&lt;!</span><span class=nt>--</span> <span class=nt>IE8</span> <span class=nt>以及更早的版本</span> <span class=nt>--</span><span class=o>&gt;</span>
<span class=nt>filter</span><span class=p>:</span><span class=nd>alpha</span><span class=o>(</span><span class=nt>opacity</span><span class=o>=</span><span class=nt>50</span><span class=o>);</span>   
<span class=o>&lt;!</span><span class=nt>--</span> <span class=nt>火狐浏览器</span> <span class=nt>--</span><span class=o>&gt;</span>
<span class=nt>-moz-opacity</span><span class=p>:</span><span class=nd>0</span><span class=p>.</span><span class=nc>5</span><span class=o>;</span>   
<span class=o>&lt;!</span><span class=nt>--</span> <span class=nt>Konqueror浏览器</span> <span class=nt>--</span><span class=o>&gt;</span>
<span class=nt>-khtml-opacity</span><span class=o>:</span> <span class=nt>0</span><span class=p>.</span><span class=nc>5</span><span class=o>;</span>   
<span class=o>&lt;!</span><span class=nt>--</span> <span class=nt>所有浏览器都支持的一个css属性</span> <span class=nt>--</span><span class=o>&gt;</span>
<span class=nt>opacity</span><span class=o>:</span> <span class=nt>0</span><span class=p>.</span><span class=nc>5</span><span class=o>;</span>
</code></pre></td></tr></table></div></div><h2 id=如何通过选中文字来勾选取消复选框>如何通过选中文字来勾选/取消复选框</h2><p>想要在选中文字的时候就自动勾选或取消复选框，有两种实现的方式：</p><h3 id=方式一在复选框的外边包上label标签>方式一：在复选框的外边包上label标签</h3><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html><span class=p>&lt;</span><span class=nt>label</span><span class=p>&gt;&lt;</span><span class=nt>input</span> <span class=na>type</span><span class=o>=</span><span class=s>&#34;checkbox&#34;</span><span class=p>&gt;</span>233333333<span class=p>&lt;/</span><span class=nt>label</span><span class=p>&gt;</span>
</code></pre></td></tr></table></div></div><h3 id=方式二通过label标签的for属性来联动某一个复选框>方式二：通过label标签的for属性来联动某一个复选框</h3><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html><span class=p>&lt;</span><span class=nt>input</span> <span class=na>type</span><span class=o>=</span><span class=s>&#34;checkbox&#34;</span> <span class=na>id</span><span class=o>=</span><span class=s>&#34;check1&#34;</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>label</span> <span class=na>for</span><span class=o>=</span><span class=s>&#34;check1&#34;</span><span class=p>&gt;</span>55555555555<span class=p>&lt;/</span><span class=nt>label</span><span class=p>&gt;</span>
</code></pre></td></tr></table></div></div><p>另外，当复选框和文字无法对齐的时候，可以在复选框里添加<code>style="vertical-align: sub;"</code>来实现对齐。</p><h2 id=如何屏蔽双击选中文本>如何屏蔽双击选中文本</h2><p>IE浏览器可以通过在某个标签里添加<code>onselectstart="return false"</code>来屏蔽双击选中文本，该属性在火狐中无效，火狐需要用<code>style="-moz-user-select:none;"</code>。此外还可以在body里添加该属性来实现整个网页都无法选中文字。</p><p>类似的属性属性还有：</p><ul><li>禁止鼠标右键：<code>oncontextmenu="return false"</code></li><li>禁止拖放：<code>ondragstart="return false"</code></li><li>禁止拷贝：<code>oncopy=document.selection.empty()</code></li><li>禁止复制：<code>oncopy = "return false"</code></li><li>禁止保存：<code>&lt;noscript>&lt;iframe src="*.htm">&lt;/iframe>&lt;/noscript></code>，放在head里面。</li><li>禁止粘贴：<code>&lt;input type=text onpaste="return false"></code></li><li>禁止剪贴：<code>oncut = "return false"</code></li><li>关闭输入法：<code>&lt;input style="ime-mode:disabled"></code></li></ul><h2 id=文本自动换行问题>文本自动换行问题</h2><p>当行内出现很长的英文单词或者url的时候，会出现自动换行的问题，为了美化页面，往往会希望这些很长的英文单词或者url能够断开来，超出的部分换行到下一行。</p><p>可以通过使用两个属性来实现该需求：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=nt>word-wrap</span><span class=p>:</span><span class=nd>break-word</span><span class=o>;</span>
<span class=nt>word-break</span><span class=p>:</span><span class=nd>break-all</span><span class=o>;</span>
</code></pre></td></tr></table></div></div><h3 id=word-wrap>word-wrap</h3><p><code>word-wrap</code>用来控制换行，有两种取值：</p><ul><li>normal</li><li>break-word（此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。）</li></ul><h3 id=word-break>word-break</h3><p><code>word-break</code>用来控制断词，有三种取值：</p><ul><li>normal</li><li>break-all（是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。）</li><li>keep-all（是指Chinese, Japanese, and Korean不断词，一句话一行，可以用来排列古诗哟~）</li></ul><h2 id=文本溢出控制>文本溢出控制</h2><h3 id=单行溢出>单行溢出</h3><p><code>text-overflow</code>是CSS3中的属性，规定了文本溢出后的显示样式，但它不会强制文本溢出，所以有时候会不生效。该属性支持的值如下：</p><blockquote><ul><li><code>clip</code>：默认值，将溢出的文本裁减掉</li><li><code>ellipsis</code>：将溢出的文本用省略号(&mldr;)来表示</li><li><code>&lt;string></code>：设置一个字符串用来表示溢出的文本</li></ul><p>兼容性上，除了<code>&lt;string></code>外，其余两个属性兼容到了IE6+，所以大可放心使用。</p></blockquote><p>为了让该属性生效，解决方法如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=nt>width</span><span class=o>:</span> <span class=nt>100</span><span class=o>%;</span>  <span class=c>/*也可以是固定值、min-width这些*/</span>
<span class=nt>white-space</span><span class=o>:</span> <span class=nt>nowrap</span><span class=o>;</span>  <span class=c>/*强制文本不能换行*/</span>
<span class=nt>overflow</span><span class=o>:</span> <span class=nt>hidden</span><span class=o>;</span>  <span class=c>/*隐藏溢出内容*/</span>
<span class=nt>text-overflow</span><span class=o>:</span> <span class=nt>ellipsis</span><span class=o>;</span>
</code></pre></td></tr></table></div></div><h3 id=多行溢出>多行溢出</h3><p>通过<code>display: -webkit-box;</code>可以实现多行溢出：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=nt>width</span><span class=o>:</span> <span class=nt>100</span><span class=o>%;</span>
<span class=nt>overflow</span><span class=o>:</span> <span class=nt>hidden</span><span class=o>;</span>
<span class=nt>word-break</span><span class=o>:</span> <span class=nt>break-all</span><span class=o>;</span>  <span class=c>/*允许在单词内换行，更美观*/</span>
<span class=nt>text-overflow</span><span class=o>:</span> <span class=nt>ellipsis</span><span class=o>;</span>
<span class=nt>display</span><span class=o>:</span> <span class=nt>-webkit-box</span><span class=o>;</span>  <span class=c>/*元素作为box伸缩盒子*/</span>
<span class=nt>-webkit-line-clamp</span><span class=o>:</span> <span class=nt>3</span><span class=o>;</span>  <span class=c>/*设置文本行数限制*/</span>
<span class=nt>-webkit-box-orient</span><span class=o>:</span> <span class=nt>vertical</span><span class=o>;</span>  <span class=c>/*设置文本排列方式*/</span>
</code></pre></td></tr></table></div></div><h2 id=js文件中的中文在网页上显示为乱码>JS文件中的中文在网页上显示为乱码</h2><p>如果页面已经设置了<code>&lt;meta charset="utf-8"></code>，JS文件里的中文在网页上仍然显示为乱码，可能是由于JS文件的编码问题导致的。</p><p>JS文件本身的编码默认为<code>ANSI编码</code>，而引入该JS文件的页面则使用了<code>utf-8</code>编码，所以导致了中文乱码。解决方法是将该JS文件自身的编码改为<code>utf-8</code>编码，可以借助常用的编辑器比如<code>Nodepad++</code>或者<code>Editplus</code>等来修改JS文件自身的编码。</p><h2 id=参考链接>参考链接</h2><ul><li><a href=https://blog.csdn.net/u011565547/article/details/77198026 target=_blank rel="noopener noreffer">解决文档中有url链接时被强制换行的问题</a></li><li><a href=https://www.cnblogs.com/sharpest/p/7675856.html target=_blank rel="noopener noreffer">JS文件中的中文在网页上显示为乱码</a></li><li><a href=https://www.cnblogs.com/ichenchao/articles/11168836.html target=_blank rel="noopener noreffer">谈谈text-overflow的那些坑和应对方法</a></li></ul><div class="details admonition warning open"><div class="details-summary admonition-title"><i class="icon fas fa-exclamation-triangle fa-fwwarning"></i>警告<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>本文最后更新于 <span class=timeago datetime=2021-01-26T22:49:52 title="January 26, 2021">January 26, 2021</span>，文中内容可能已过时，请谨慎使用。</div></div></div><div class=post-reward><input type=checkbox name=reward id=reward hidden>
<label class=reward-button for=reward>赞赏支持</label><div class=qr-code><label class=qr-code-image for=reward><img class=image src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/wechat.png>
<span>微信打赏</span></label>
<label class=qr-code-image for=reward><img class=image src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/alipay.png>
<span>支付宝打赏</span></label></div></div></div><div class=post-footer id=post-footer><div class=post-info><div class=post-info-line><div class=post-info-mod><span>更新于 2021-01-26</span></div><div class=post-info-license><span><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span></div></div><div class=post-info-line><div class=post-info-md><span><a class=link-to-markdown href=/posts/4d6b513d.html/index.md target=_blank>阅读原始文档</a></span></div><div class=post-info-share><span><a href=javascript:void(0); title="分享到 Twitter" data-sharer=twitter data-url=https://lewky.cn/posts/4d6b513d.html/ data-title=前端问题汇总 data-hashtags=CSS,工作记录><i class="fab fa-twitter fa-fw"></i></a><a href=javascript:void(0); title="分享到 Facebook" data-sharer=facebook data-url=https://lewky.cn/posts/4d6b513d.html/ data-hashtag=CSS><i class="fab fa-facebook-square fa-fw"></i></a><a href=javascript:void(0); title="分享到 Hacker News" data-sharer=hackernews data-url=https://lewky.cn/posts/4d6b513d.html/ data-title=前端问题汇总><i class="fab fa-hacker-news fa-fw"></i></a><a href=javascript:void(0); title="分享到 Line" data-sharer=line data-url=https://lewky.cn/posts/4d6b513d.html/ data-title=前端问题汇总><i data-svg-src=https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg></i></a><a href=javascript:void(0); title="分享到 微博" data-sharer=weibo data-url=https://lewky.cn/posts/4d6b513d.html/ data-title=前端问题汇总><i class="fab fa-weibo fa-fw"></i></a></span></div></div></div><div class=post-info-more><section class=post-tags><i class="fas fa-tags fa-fw"></i>&nbsp;<a href=/tags/css/>CSS</a>,&nbsp;<a href=/tags/%E5%B7%A5%E4%BD%9C%E8%AE%B0%E5%BD%95/>工作记录</a></section><section><span><a href=javascript:void(0); onclick=window.history.back();>返回</a></span>&nbsp;|&nbsp;<span><a href=/>主页</a></span></section></div><div class=post-nav><a href=/posts/a39d8a42.html/ class=prev rel=prev title=文本编辑器问题汇总><i class="fas fa-angle-left fa-fw"></i>文本编辑器问题汇总</a>
<a href=/posts/df5055d.html/ class=next rel=next title="PostgreSQL - N''和::bpchar">PostgreSQL - N''和::bpchar<i class="fas fa-angle-right fa-fw"></i></a></div></div><div id=comments><div id=waline></div><script src=https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js></script><script>new Waline({el:'#waline',meta:["nick","mail","link"],requiredMeta:["nick","mail"],login:"force",placeholder:"为防恶意灌水攻击，评论前需注册并登录，望见谅~",serverURL:"https://comment.lewky.cn/",avatarCDN:"https://sdn.geekzu.org/avatar/",pageSize:20,avatar:"retro",lang:"zh-CN",visitor:true,highlight:true,uploadImage:false,emoji:['https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/嘉然今天吃什么','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/大航海嘉然','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/向晚大魔王','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/贝拉kira','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/珈乐Carol','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/乃琳Queen','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/EveOneCat','https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/滑稽','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/default']});</script></div></article></div></main><footer class=footer><div class=footer-container><div class=footer-line><span id=run-time></span>|
<a href=http://rssblog.vercel.app/ target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i>&nbsp;RSSBlog</a></div><div class=footer-line><i class="far fa-copyright fa-fw"></i><span itemprop=copyrightYear>2018 - 2022</span><span class=author itemprop=copyrightHolder>&nbsp;<a href=/ target=_blank>雨临Lewis</a></span>&nbsp;|&nbsp;<span class=license><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span><span class=icp-splitter>&nbsp;|&nbsp;</span><br class=icp-br><span class=icp><a target=_blank href=http://www.beian.miit.gov.cn/ style=font-weight:700>粤ICP备19103822</a></span></div></div></footer></div><div id=fixed-buttons><a href=# id=back-to-top class=fixed-button title=回到顶部><i class="fas fa-arrow-up fa-fw"></i></a><a href=# id=view-comments class=fixed-button title=查看评论><i class="fas fa-comment fa-fw"></i></a></div><div class=sidebar_wo><div id=leimu><img src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png alt=雷姆 onmouseover="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/leimuB.png'" onmouseout="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/leimuA.png'" title=回到顶部></div><div class=sidebar_wo id=lamu><img src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png alt=雷姆 onmouseover="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/lamuB.png'" onmouseout="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/lamuA.png'" title=回到底部></div></div><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/css/lightgallery.min.css><script type=text/javascript src=https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/js/lightgallery.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lg-zoom.js@1.2.0/dist/lg-zoom.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js></script><script type=text/javascript>window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":30},"comment":{},"lightGallery":{"actualSize":false,"exThumbImage":"data-thumbnail","hideBarsDelay":2000,"selector":".lightgallery","speed":400,"thumbContHeight":80,"thumbWidth":80,"thumbnail":true}};</script><script type=text/javascript src=/js/theme.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js></script><script>var $cdnPrefix="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master";</script><script type=text/javascript src=/js/custom.js></script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?6f278ed0fdb01edb3b1e7398379e5432";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script></body></html>